import axios from 'axios'
import React, { useEffect, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { ProductCard } from 'react-vant'
interface ListData {
  price: string
  id: string
  title: string
  word: string
  img: string
}
const Home: React.FC = () => {
  const navigate = useNavigate()
  const [list, setList] = useState<ListData[]>([])
  useEffect(() => {
    axios.get('/api/list').then((res) => {
      const resp = res.data.data
      setList(resp)
    })
  }, [])
  return (
    <div>
      {list.map((v, i) => {
        return (
          <ProductCard
            price={v.price}
            desc={v.word}
            title={v.title}
            thumb={v.img}
            key={v.id}
            onClick={() => navigate(`/detail/${v.id}`, { state: v })}
          />
        )
      })}
    </div>
  )
}
export default Home
